import React, { Component } from 'react';
import '../styles/Detail.scss'
import * as service from '../api/index'
import { Swiper ,List ,Modal,Toast} from 'antd-mobile'
import { withRouter} from 'react-router-dom';

class MyDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Swiperlist: [],
            goodinfo: [],
            prolist:[],
            proid:'',
            Defaultaddress:'',
            key:this.props.location.key,
            shoucanglist:JSON.parse(localStorage.getItem('soucang')),
            isshoucang:false,
            soucanglist:JSON.parse(localStorage.getItem('soucang'))
        }

    }

    async componentDidMount() {//挂载期，发送请求初始页面     
           if(this.props.location.state === undefined){ 
                this.props.history.push('/index')     
           }else{
            var res = await service.pro_detail(this.props.location.state.id  )
            var  data = res.data.data
            var { img1,img2,img3,img4} = data
            this.setState({Swiperlist:[img1,img2,img3,img4]})
            this.setState({goodinfo:res.data.data})

            // var res4 = await service.pro_recommendlist({ })//推荐列表
            // console.log(res4.data.data);
            // this.setState({prolist:res4.data.data})
           }  
            var res2 = await service.pro_list({ count:Math.floor(Math.random()*15+1)})//随机推荐列表
            this.setState({prolist:res2.data.data})

            var ischecked = this.state.soucanglist.find((item,index)=>{
                 return(  item == this.props.location.state.id )
            })  
            this.setState({isshoucang: ischecked ? true :false })

            var res3 = await service.address_defaultAddress({userid:localStorage.getItem('userid')})
            this.setState({Defaultaddress: `${res3.data.data[0].province}-${res3.data.data[0].city}-${res3.data.data[0].county}`})       
    }
    async addgoodcar() {//加入购物车，该商品数量加一
        var res = await service.cart_add({userid:localStorage.getItem('userid'),proid:this.state.goodinfo.proid,num:'1'})
        if(res.data.code==200){
            Toast.show({
                icon: 'success',
                content: '购物车加入成功',           
            })
        }
    }
    async gogoodcar() {//去购物车页面
      this.props.history.push('/index/goodcar')
    }
    goback() {    //回退按钮
      this.props.history.push('/index')
    }
    async good_fav() {//收藏商品
    }
    goaddress(){//跳转至收货地址页面
        this.props.history.push( { pathname:'/useraddress',state:{status:3}})
    }
    godetail(proid){//去详情页面
        this.props.history.push({pathname:'/detail',state:{id:proid}})
        this.props.history.go(0)
    }
    async addOrder(){//添加至订单页面
        var res = await service.cart_add({userid:localStorage.getItem('userid'),proid:this.state.goodinfo.proid,num:'1'})
        var res2 = await service.order_addOrder({userid:localStorage.getItem('userid')})
        if(res2.data.code==200){
            Toast.show({
                icon: 'loading',
                content: '订单添加中…',
                afterClose: () => {
                    this.props.history.push({pathname:'/ConfirmOrder',state:{time:res2.data.time}})
                }
            })
        }
    }
    shoucang(){
        this.setState({isshoucang:!this.state.isshoucang},()=>{

        })
        var arr1  = this.state.shoucanglist ? this.state.shoucanglist :[]
        arr1.push(this.props.location.state.id)
        localStorage.setItem('soucang',JSON.stringify(arr1))
    
    }
    render() {
        return (
            <div className='detail'  >
               <div className="head">
               <span className='iconfont icon-xiangzuojiantou' onClick={() => { this.goback() }} >  </span>
               </div>
                <main>
                    <div className="img">
                        <Swiper autoplay loop autoplayInterval={2000}>
                            {
                                this.state.Swiperlist.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                    </div>
                 <div className="mian_main_price">
                 <div className="middle">
                        <div className="left">
                            <div className="yuanjia">
                                ￥原价{this.state.goodinfo.originprice}
                            </div>
                            <div className="activity">
                                活动价
                                <span>
                                    ￥{parseInt( this.state.goodinfo.originprice * (this.state.goodinfo.discount)/10 )} 
                                </span>
                            </div>
                        </div>
                        <div className="right">
                            <span>销量{this.state.goodinfo.sales}</span>
                        </div>
                    </div>
                    <div className="bottom">
                        <div className='baoyou'>
                            <span className='category' >{this.state.goodinfo.category}</span>
                            <span className='brand' >{this.state.goodinfo.brand }</span>
                            <span className='proname' > {this.state.goodinfo.proname}</span>
                        </div>
                    </div>

                 </div>
                 <div className="address">
                    {/* `${this.state.Defaultaddress.province}-${this.state.Defaultaddress.city}-${this.state.Defaultaddress.county}` */}
                 <List.Item extra={this.state.Defaultaddress ? this.state.Defaultaddress: '请选择你的收货地址' }
                            arrow={true}
                            clickable={false}
                            onClick={() => {
                                this.setState({ visible: true })
                            }}
                        >
                            <Modal
                                title='选择你的收货地址'
                                visible={this.state.visible}//控制弹出层显示隐藏
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数
                                        this.setState({ visible: false })
                                        this.goaddress()
                                }}
                                actions={[//按钮的文字
                                    {
                                        key: 'confirm',
                                        text: '去选择',
                                    },
                                ]}
                            />
                            送货地址
                        </List.Item>
                 </div>
                 <div className="prolist">
                  {
                    this.state.prolist.map((item,index)=>{
                        return(
                            <div className="item" key={index}  onClick={()=>{this.godetail(item.proid)}} >
                                <div className="img">
                                    <img src={item.img1} alt="" />
                                </div>
                               <div className="text">
                                <p>{item.proname}</p>
                                <span>￥{item.originprice}</span>
                               </div>
                            </div>
                        )
                    })
                  }
                </div>
                </main>
                <footer>
                    <div className="icon-m">
                        <span className='iconfont icon-kefu' ></span>
                        <span onClick={() => { this.good_fav() }} >客服</span>
                    </div>
                    <div className="icon-m"  onClick={() => { this.gogoodcar() }}>
                        <span className='iconfont icon-31gouwuche' ></span>
                        <span>购物车</span>
                    </div>
                    <div className="icon-m" >
                        <span className= {this.state.isshoucang ==  false ? 'iconfont icon-shoucang' : 'iconfont icon-star'}  onClick={()=>{this.shoucang( )}} ></span>
                        <span>{this.state.isshoucang ==  false ? '收藏' : '已收藏' }</span>
                    </div>
                    <div className="button">
                        <button className='one' onClick={() => { this.addgoodcar()}} >加入购物车</button>
                        <button className='two' onClick={()=>{this.addOrder()}}  >立即购买</button>
                    </div>
                </footer>
            </div>
        );
    }
}

export default  MyDetail;